package cn.edu.baiyunu.myapplication.ui.components

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.ShoppingCart
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import cn.edu.baiyunu.myapplication.data.model.Category
import cn.edu.baiyunu.myapplication.data.model.Transaction
import cn.edu.baiyunu.myapplication.ui.utils.formatDateTime
import cn.edu.baiyunu.myapplication.ui.utils.getIconByName
import java.text.NumberFormat
import java.util.Date
import java.util.Locale

/**
 * 交易条目组件
 *
 * @param transaction 交易数据
 * @param category 分类数据
 * @param onClick 点击回调
 * @param modifier 修饰符
 */
@Composable
fun TransactionItem(
    transaction: Transaction,
    category: Category,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 分类图标
        Icon(
            imageVector = getIconByName(category.icon),
            contentDescription = category.name,
            modifier = Modifier
                .size(40.dp)
                .padding(4.dp),
            tint = MaterialTheme.colorScheme.primary
        )
        
        Spacer(modifier = Modifier.width(16.dp))
        
        // 中间内容：分类名称和备注
        Column(
            modifier = Modifier.weight(1f)
        ) {
            Text(
                text = category.name,
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.SemiBold
            )
            
            if (transaction.note.isNotBlank()) {
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = transaction.note,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            }
        }
        
        Spacer(modifier = Modifier.width(16.dp))
        
        // 右侧内容：金额和日期
        Column(
            horizontalAlignment = Alignment.End,
            verticalArrangement = Arrangement.Center
        ) {
            // 显示金额，收入为绿色，支出为红色
            val amountColor = if (transaction.type == "income") 
                Color(0xFF4CAF50) else Color(0xFFE53935)
            val amountPrefix = if (transaction.type == "income") "+" else "-"
            val amountFormatted = NumberFormat.getCurrencyInstance(Locale.CHINA)
                .format(transaction.amount).replace("¥", "￥")
            
            Text(
                text = "$amountPrefix$amountFormatted",
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.Bold,
                color = amountColor
            )
            
            Spacer(modifier = Modifier.height(4.dp))
            
            // 显示日期
            Text(
                text = formatDateTime(transaction.date),
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
} 